<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">

        </tbody>
    </table>
    <script>
        var dataList = [
            {id: 1, name: "郭志", age: 19},
            {id: 2, name: "郭志", age: 19},
            {id: 3, name: "郭志", age: 19},
            {id: 4, name: "郭志", age: 19},
            {id: 5, name: "郭志", age: 19},
        ];
        for (var idx in dataList){
            var info = dataList[idx];
            var tr = document.createElement("tr");  //在内存中创建一个元素，但此时它尚未被添加到页面文档中
            for(var key in info){
                var text = info[key];
                var td = document.createElement('td');
                td.innerText = text;  //设置或者返回元素的文本，没有赋值则是返回
                tr.appendChild(td);  //为元素添加一个新的子元素
            };
            var bodyTag = document.getElementById("body");  //返回对拥有指定 id 的第一个对象的引用。
            bodyTag.appendChild(tr);
        };
    </script>
</body>
</html>